<template>
    <div class="repair-task-progress-layout">
        <yd-timeline>
            <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
                <div slot="list">
                    <yd-timeline-item v-for="(item,index) in progressList">

                        <div>
                            <!--"03", "配送中"-->

                            <!--"95", "待评价"-->
                            <!--"99", "已完成"-->
                            <!--01-发起，02-审批，03-经办，
                            04-接单，05-发货，06-签收，85-撤销，90-拒绝，95-评价

                            [目前仅使用：01-发起， 06-签收，95-评价三个状态-->
                            <div  class="task-progress-content-part">
                                <span class="title-part">{{item.stateName}}</span>
                                <span class="gray-tint-color">{{item.created.substring(0,16)}}</span>
                            </div>
                            <div v-if="item.state==='02'||item.state==='03'||item.state==='04'||item.state==='06'||item.state==='90'||item.state==='91'" class="task-progress-people-part">
                                <span class="blue-color">{{item.name}}</span>
                                <!--<i v-if="type==='0'" @click="telHandlerClick(item.mobile)" slot="icon" class="iconfont icon-dianhua1 blue-color"></i>-->
                                <img v-if="type==='0'" @click="telHandlerClick(item.mobile)" src="../../assets/icon-dianhua1.png" slot="icon" class="phone-logo-part">
                            </div>
                            <p v-if="item.state==='95'||item.state==='06'" style="text-align: left" class="gray-tint-color">{{item.content}}</p>
                        </div>

                    </yd-timeline-item>
                </div>
                <span slot="doneTip"></span>
            </yd-infinitescroll>
        </yd-timeline>

    </div>
</template>

<script>
    import {voucherprogressList} from "../../pcof/post";
    import {userInfoData} from '../../globalVariables'

    export default {
        name: "voucherProgress",

        data() {
            return {
                applicationUuid:'',
                progressList:[],
                page: 1,
                type:'0', //type 0是待办页 1是历史页来的
                pageSize: 20,
                serviceTotalPage: 1,
            }
        },

        methods:
            {
                telHandlerClick(number) {
                    window.location.href = 'tel://'+number;
                },
                /**
                 * 办公用品进度页
                 *  orderUuid 单子的id
                 *  pageNumber,pageSize
                 */
                // export const progressing = (
                async loadList() {
                    var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                    var response = await voucherprogressList(mobile,this.applicationUuid,
                        this.page,
                        this.pageSize);
                    if (response.data.code === 200) {
                        const _list = response.data.data.list;
                        this.progressList = [...this.progressList, ..._list];
                        if (_list.length < this.pageSize || this.page === this.serviceTotalPage) {
                            /* 所有数据加载完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                            return;
                        }
                        /* 单次请求数据完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                        this.page++;

                    } else {
                        this.$dialog.toast({
                            mes: response.data.msg,
                            timeout: 1500
                        });
                    }
                },
            },
        async created() {
            this.applicationUuid = this.$route.params.applicationUuid;
            this.type=this.$route.params.type;

            console.log('lishi'+this.type);
            // mobile,orderUuid,pageNumber,pageSize

            var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
            this.$dialog.loading.open('加载中...');
            var response = await voucherprogressList(mobile,this.applicationUuid,1,20);
            if (response.data.code === 200) {
                this.$dialog.loading.close();
                this.progressList = response.data.data.list;
                this.serviceTotalPage = response.data.data.totalPage;
                if (this.serviceTotalPage > 1) {
                    this.page++;
                } else {
                    /* 所有数据加载完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                }
            }
            else
            {
                this.$dialog.loading.close();
                this.$dialog.toast({
                    mes: response.data.msg,
                    timeout: 1500
                });
            }

        },

    }
</script>

<style lang="scss">


    .repair-task-progress-layout {
        padding-top: 0rem;
        .task-progress-content-part {
            display: flex;
            justify-content: space-between;

            .title-part {
                font-size: 1.2em;
                color: #0d0d0d
            }
        }

        .task-progress-people-part {
            display: flex;
            padding-top: 0.2rem;

            .iconfont {
                font-size: 0.3rem;
                padding-left: 0.1rem;
            }

            .phone-logo-part {
                width: 0.3rem;
                height: 0.3rem;
                margin-left: 0.1rem;
            }
        }

        .biadu-map-part {
            width: 100%;
            height: 4rem;
        }

        .task-operation-part {
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            display: flex;
            z-index: 200;
            background: #fafafa;

            .horizontal-part {
                margin: 0 auto;
                width: 40%;
            }

            .weui-btn {
                display: flex;
                height: 0.6rem;
                align-items: center;
                justify-content: center;
                font-size: 1.2em;
            }
        }
    }


</style>